<template>
	<view>
		<!-- 基础用法，不包含校验规则 -->
		<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="customRules">
			<uni-forms-item label="用户名" required name="username">
				<uni-easyinput v-model="baseFormData.username" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="密码" required name="password">
				<uni-easyinput v-model="baseFormData.password" placeholder="请输入密码" />
			</uni-forms-item>
			</uni-forms-item>
			<uni-forms-item label="昵称" required name="nickname">
				<uni-easyinput v-model="baseFormData.nickname" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="年龄" required name="age">
				<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
			</uni-forms-item>
			<uni-forms-item label="手机号" required name="phone">
				<uni-easyinput v-model="baseFormData.phone" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="邮箱" required name="email">
				<uni-easyinput v-model="baseFormData.email" placeholder="请输入邮箱" />
			</uni-forms-item>
			<uni-forms-item label="头像" required>
				<uni-section>
					<view class="example-body custom-image-box">
						<text class="text">选择头像</text>
						<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
							file-mediatype="image" @progress="onChooseFile()">选择</uni-file-picker>
					</view>
				</uni-section>
			</uni-forms-item>
		</uni-forms>

		<button type="primary" @click="submitzhuce('baseForm')">注册</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基础表单数据
				baseFormData: {
					username: '',
					password: '',
					nickname: '',
					avatar: '',
					age: "",
					phone: "",
					email: "",
					sex: 2,
				},
				// 单选数据源
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}, {
					text: '保密',
					value: 2
				}],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
				fileLists: [{
					url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}, {
					url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'uniapp-logo.png'
				}, {
					url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}],

				// 自定义表单校验规则
				customRules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '用户名不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					nickname: {
						rules: [{
							required: true,
							errorMessage: '昵称不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '手机号不能为空'
							},
							{
								format: 'number',
								errorMessage: '手机号只能输入数字'
							}
						]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '域名不能为空'
						}, {
							format: 'email',
							errorMessage: '域名格式错误'
						}]
					}

				}
			}
		},
		methods: {
			// 注册
			submitzhuce(ref) {

				let _this = this;
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					console.log('success', _this.baseFormData);
					uni.request({
						url: "http://localhost:8000/api/register",
						method: 'POST',
						data: {
							username: _this.baseFormData.username,
							password: _this.baseFormData.password,
							nickname: _this.baseFormData.nickname,
							avatar: _this.baseFormData.avatar,
							age: _this.baseFormData.age,
							phone: _this.baseFormData.phone,
							email: _this.baseFormData.email
						},
						success(res) {
							if (res.data.code == 200) {
								console.log('res.data', res.data.message)
								uni.showToast({
									title: "注册成功"
								})
								uni.navigateBack()
							} else {
								console.log('res.data', res.data.message)
								uni.showToast({
									title: "注册失败",
									icon: 'error'
								})
							}
						}
					})
					uni.navigateBack()
				}).catch(err => {
					console.log('err', err);
				})

			},

			// 云存储
			// 	uniCloud.chooseAndUploadFile({
			// 					   type:image,
			// 					   count:1,

			// 					   // 选择文件后的回调函数
			// 					   onChooseFile(res){
			// 						   console.log('选择文件后的回调函数', res.tempFiles[0])
			// 						   // _this.fileData = res.tempFiles[0]
			// 						   console.log('res.tempFilePaths[0]', res.tempFilePaths[0])

			// 					   },
			// 					   // 上传进度的回调
			// 					   // onUploadProgress(pro){
			// 						  //  console.log('上传进度的回调', pro)
			// 						  //  _this.percent = pro.loaded / pro.total * 100
			// 					   // }
			// 	})
			// 选择文件后的回调函数
			onChooseFile(res) {
				let _this = this;
				console.log('选择文件后的回调函数', res.tempFile.url)
				_this.baseFormData.avatar = res.tempFile.url
				// _this.fileData = res.tempFiles[0]
				// _this.imgurldata =  res.tempFilePaths[0]


			},

		}
	}
</script>

<style>
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>